import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/page/pay/payBind/pay_bind_page.dart';
import 'package:boss/ui/widget/image/base_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hi_common/hi_common.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:router/annotation.dart';

@RouterConfig(PayScanPage.pageName)
class PayScanPage extends StatefulWidget {
  static const pageName = '/PayScanPage';

  @override
  _PayScanPageState createState() => _PayScanPageState();
}

class _PayScanPageState extends BaseState<PayScanPage> {
  _PayScanPageState() : super(PayScanPage.pageName);

  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController controller;
  bool isFlash = false;

  @override
  Widget build(BuildContext context) {
    final safeTop = MediaQuery.of(context).padding.top;
    return AnnotatedRegion(
      value: SystemUiOverlayStyle.light,
      child: Scaffold(
        body: Column(
          children: [
            Container(
              color: const Color(0xFF272727),
              height: 88.w + safeTop,
              padding: EdgeInsets.only(top: safeTop),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        Navigator.pop(context);
                      },
                      behavior: HitTestBehavior.translucent,
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 30.w),
                        alignment: Alignment.centerLeft,
                        child: BaseImage(
                          'assets/image/arrow_left_icon.png',
                          width: 16.w,
                          height: 34.w,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  Text('扫码绑定', style: TextStyleConstant().white_36.copyWith(fontWeight: FontWeight.w500)),
                  Expanded(child: SizedBox()),
                ],
              ),
            ),
            Expanded(
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  QRView(
                    key: qrKey,
                    onQRViewCreated: _onQRViewCreated,
                  ),
                  ColorFiltered(
                    colorFilter: ColorFilter.mode(
                      Colors.black.withOpacity(.6),
                      BlendMode.srcOut,
                    ),
                    child: Stack(
                      alignment: Alignment.topCenter,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.black,
                            backgroundBlendMode: BlendMode.dstOut,
                          ),
                        ),
                        Positioned(
                          top: 310.h,
                          child: Container(
                            width: 360.w,
                            height: 360.w,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Positioned(
                    top: 310.h,
                    child: Column(
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 30.w),
                          width: 360.w,
                          height: 360.w,
                          decoration: BoxDecoration(
                            color: Colors.black.withOpacity(0.3),
                            image: DecorationImage(
                              image: AssetImage('assets/image/scan_border.png'),
                            ),
                          ),
                        ),
                        Text('将二维码/条形码放入取景框中即可自动扫描', style: TextStyleConstant().white_24)
                      ],
                    ),
                  ),
                  Positioned(
                      bottom: 50 + MediaQuery.of(context).padding.bottom,
                      child: IconButton(
                        icon: Icon(
                          isFlash ? Icons.flash_off : Icons.flash_on,
                          color: Colors.white,
                          size: 30,
                        ),
                        onPressed: () {
                          setState(() {
                            isFlash = !isFlash;
                          });
                          controller?.toggleFlash();
                        },
                      )),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;

    controller.scannedDataStream.listen((scanData) async {
      try {
        final data = Uri.parse(scanData);
        final qrCode = data.queryParameters['qrcode'];

        final reg = RegExp(r'^QD\d{14}');

        if (reg.hasMatch(qrCode)) {
          Navigator.popAndPushNamed(context, PayBindPage.pageName, arguments: {'qrCode': qrCode});
        } else {
          toast('请扫描正确的二维码');
        }
      } catch (e) {
        toast('请扫描正确的二维码');
      }
    });
  }

  @override
  void dispose() {
    if (isFlash) {
      controller.toggleFlash();
    }
    controller?.dispose();
    super.dispose();
  }
}
